<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@page import="com.cap.bts.framework.usermgnt.constant.EmployeeStatus"%>    
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>查询套餐</title>
<%@include file="../include/include.jsp"%>
<link rel="stylesheet" type="text/css" href="${csspath }/public.css"/>
<link rel="stylesheet" type="text/css" href="${csspath }/datepicker.css"/>
<link rel="stylesheet" type="text/css" href="${csspath }/style_l.css"/>
<script type="text/javascript" src="${jspath }/jquery-1.4.4.js"></script>
<script type="text/javascript" src="${jspath }/jquery.ui.min.js"></script>
<script type="text/javascript" src="${jspath }/ui.datepicker_zh-CN.js"></script>
<script type="text/javascript" src="${jspath }/jquery.blockUI.js"></script>
<script type="text/javascript" src="${jspath }/public.js"></script>
<script type="text/javascript" src="${jspath }/jquery.selectAll.js"></script>
<script type="text/javascript" src="${jspath}/jquery/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="${jspath}/jquery/jquery.alerts.js"></script>
<script type="text/javascript" src="${layerPath}/layer.js"></script>
<script type="text/javascript" src="${jspath}/load_layer.js"></script>
<link rel="stylesheet" type="text/css" href="${csspath}/jquery.alerts.css" />

<link rel="stylesheet" type="text/css"
	href="${webcontext}/css/validationEngine.jquery.css" />
<script src="${jspath}/jquery/validate/jquery.validationEngine.js"
	type="text/javascript"></script>
<script src="${jspath}/jquery/validate/jquery.validationEngine-zh.js"
	type="text/javascript"></script>
	<script type="text/javascript"
	src="${webcontext}/javascript/jquery/jquery.ui.draggable.js"></script>
<link rel="stylesheet" type="text/css"
	href="${bootstrapPath}/css/bootstrap.css" />
<script type="text/javascript" src="${bootstrapPath}/js/bootstrap.js"></script>
<style type="text/css">
.formError .formErrorContent {
    -moz-border-radius: 6px 6px 6px 6px;
    -moz-box-shadow: 0 0 6px #000000;
    background: none repeat scroll 0 0 #EE0101;
    border: 2px solid #DDDDDD;
    color: #FFFFFF;
    font-family: tahoma;
    font-size: 11px;
    padding: 4px 10px;
    width: 100px;
}
/* .align_l{ */
/* 	border: 1px solid black; */
/* } */
.data_tab tr.over td {
	color: #000;
	font-weight: bold;
	background-color: #fff;
}

.data_tab tr.over td a {
	background: url("${webcontext}/images/menu/title_bg.jpg") repeat-x;
}

.align_m {
	border: 0px solid #EBEBEB;
	color: #000;
}

.align_l {
	background-color: #5cb85c;
}

.align_w {
	border: 1px solid #EBEBEB;
	background-color: #EBEBEB;
	color: #000;
}

.data_tab tr.over .align_l {
	background-color: #c9e8f7;
}

.data_tab tr.over .align_m {
	background-color: #fff;
	font-weight: normal;
}

.data_tab tr.over .align_w {
	background-color: #EBEBEB;
	font-weight: normal;
}

.hasUsed {
	color: #666666;
}
.hr {
	text-align: center;
	width: 100%;
	background-color: #96c2f1;
	height: 1px;
}
</style>

<script type="text/javascript">
$(function(){
	layer.closeAll('loading');
	$("#showAllDealer").click(function(){
		if($("#showAllDealer").attr("checked")==true){
			$("#show_form")
			.attr('action',
					'${webcontext}/crmdp/dealer/report/showMemberPackagesForAlldealerReport');
			$("#show_form").submit();
		}else{
			$("#show_form")
			.attr('action',
					'${webcontext}/crmdp/dealer/report/showMemberPackagesReport');
			$("#show_form").submit();
		}
		layer.load();
	});
$("#data_tab .tr_lign_l").click(function(){
	if ($(this).find("td").eq(7).text() == "收起") {
		$(this)
				.find("td")
				.eq(7)
				.html(
						'展开<i class="glyphicon glyphicon-menu-down" style="color: #fff"></i>');
	}else if ($(this).find("td").eq(7).text() == ""){
		return;
	}else {
		$(this)
				.find("td")
				.eq(7)
				.html(
						'收起<i class="glyphicon glyphicon-menu-up" style="color: #fff"></i>');
	}
	$(this).next().toggle();
});

});

function printPage() {
	show_form.action="${webcontext}/crmdp/dealer/report/printMemberPackagesReport";
	document.getElementById("show_form").submit();
}

</script> 
</head>
<body>
    <div class="spliter h_10"></div>
	<div id="showAllDealerDiv" align="right" style="padding-right: 20px;">
		<input id="showAllDealer" type="checkbox" value="" checked="checked"/>
		<font style="font-family: Microsoft YaHei; color: red;font-size: 14px;">显示所有门店</font>
	</div>
	<form:form id="show_form" action="#" method="post" modelAttribute="dto">
			<input type="hidden" id="memberIdHtxt" name="id" value="${submitDto.id}">
			<input type="hidden" id="mobilePhoneHtxt" name="mobilePhone" value="${submitDto.mobilePhone}">
			<input type="hidden" id="memberNameHtxt" name="memberName" value="${submitDto.memberName}">
			<input type="hidden" id="carPlateHtxt" name="carPlate" value="${submitDto.carPlate}">
			<input type="hidden" id="packageIdHtxt" name="packageId" value="${submitDto.packageId}">
			<input type="hidden" id="packageDetailIdHtxt" name="packageDetailId" value="${submitDto.packageDetailId}">
	</form:form>
	<div id="content" style="height: 600px;width: 1147px;border-bottom: thick double green;border-top: thick double green;">
		<div id="wrap">
			<div id="packageDiv">
	<core:forEach items="${resultForAlldealer}" var="memberPackagesReportOfAllDealer">
			<div class="spliter h_10"></div>
			<font style="font-family: Microsoft YaHei; color: green; font-weight: bolder;font-size: 16px;">
				手机号：${memberPackagesReportOfAllDealer.memberAndDealerInfoDto.mobilePhone}&nbsp;&nbsp;&nbsp;&nbsp;
				姓名：${memberPackagesReportOfAllDealer.memberAndDealerInfoDto.memberName} &nbsp;&nbsp;&nbsp;&nbsp;
				门店：${memberPackagesReportOfAllDealer.memberAndDealerInfoDto.dealerName}&nbsp;&nbsp;&nbsp;&nbsp;	
				地址：${memberPackagesReportOfAllDealer.memberAndDealerInfoDto.address}
			</font>
			<div class="spliter h_10"></div>
				<div id="dataTable">
					<table id="data_tab" class="table  table-condensed" style="margin-bottom: 0px;">
                    <core:forEach items="${memberPackagesReportOfAllDealer.memberPackagesReportDtoList}" var="memberPackageInfoList">
	                    <tr  style="border-top:0;">
	                    	<td width="20%" class="text-left" style="border-top: 2px solid #ebebeb;">
	                    		<font style="font-family: Microsoft YaHei; color: green; font-weight: bolder;font-size: 16px;">
	                    		车牌：${memberPackageInfoList.carPlate}
	                    		</font>
	                    		<core:if test="${memberPackageInfoList.showMemberPackageInfoReportList == null or fn:length(memberPackageInfoList.showMemberPackageInfoReportList) == 0}">
	                    		<font style="font-family: Microsoft YaHei; color: red; font-weight: bolder;font-size: 14px;">
	                    			&nbsp;该车牌无套餐
	                    		</font>
	                    	</core:if>
	                    	</td>
	                    </tr>
	                    <core:choose>
	                    	<core:when test="${memberPackageInfoList.showMemberPackageInfoReportList == null or fn:length(memberPackageInfoList.showMemberPackageInfoReportList) == 0}"></core:when>
	                    	<core:otherwise>
	                    	<tr>
								<th width="10%" class="text-left" style="border: 0;">套餐类型</th>
		                        <th width="15%" class="text-left" style="border: 0;">卡号</th>
		                        <th width="10%" class="text-left" style="border: 0;">购买日期</th>
		                        <th width="10%" class="text-left" style="border: 0;">购买价格</th>
		                        <th width="10%" class="text-left" style="border: 0;">激活日期</th>
		                        <th width="10%" class="text-left" style="border: 0;">失效日期</th>
								<th width="10%" class="text-left" style="border: 0;">状态</th>
								<th width="10%" class="text-left" style="border: 0;">操作</th>
		                    </tr>
                   		<core:forEach items="${memberPackageInfoList.showMemberPackageInfoReportList}" var="list">
                   		<core:if test="${list.status ==2 or list.status ==3 or list.status ==4 }">
	                    <tr class="tr_lign_l">
							<td class="align_l" style="color: #fff">${list.name}</td>
	                        <td class="align_l" style="color: #fff">${list.packageNumber}</td>
	                        <td class="align_l" style="color: #fff">${list.purchaseDate}</td>
	                       	<td class="align_l" style="color: #fff">${list.price}</td>
							<td class="align_l" style="color: #fff">${list.activeDate}</td>
							<td class="align_l" style="color: #fff">${list.expireDate}</td>
							<td class="align_l" style="color: #fff">
							<core:choose>
							<core:when test="${list.status==0}">
							<%= CodeTextUtils.getText("MemberPackageInfo.Status",0) %>
							</core:when>
							<core:when test="${list.status==1}">
							<%= CodeTextUtils.getText("MemberPackageInfo.Status",1) %>
							</core:when>
							<core:when test="${list.status==2}">
							<%= CodeTextUtils.getText("MemberPackageInfo.Status",2) %>
							</core:when>
							<core:when test="${list.status==3}">
							<%= CodeTextUtils.getText("MemberPackageInfo.Status",3) %>
							</core:when>
							<core:when test="${list.status==4}">
							<%= CodeTextUtils.getText("MemberPackageInfo.Status",4) %>
							</core:when>
							<core:when test="${list.status==5}">
							<%= CodeTextUtils.getText("MemberPackageInfo.Status",5) %>
							</core:when>
							<core:when test="${list.status==6}">
							<%= CodeTextUtils.getText("MemberPackageInfo.Status",6) %>
							</core:when>
							</core:choose>
							</td>
							<core:choose>
							<core:when test="${list.status ==2 or list.status ==3 or list.status ==4}">
	                        	<td class="align_l" style="color: #fff">收起<i class="glyphicon glyphicon-menu-up" style="color: #fff"></i></td>
							</core:when>
							<core:otherwise>
	                        	<td class="align_l" style="color: #fff"></td>
							</core:otherwise>
	                        </core:choose>
	                    </tr>
	                    </core:if>
	                    <core:choose>
	                    <core:when test="${list.status ==2 or list.status ==3 or list.status ==4 }">
	                    	<tr id="packageDetail${list.id}Tr" style="border-bottom: 0;">
	                    </core:when>
	                    <core:otherwise>
	                    	<tr id="packageDetail${list.id}Tr" style="display:none" style="border-bottom: 0;">
	                    </core:otherwise>
	                    </core:choose>
                    	<td colspan="8"  style="border:0;">
          					<div id="packageDivDetail" style="margin-left: 20px;">
								<div id="dataTable">
									<table id="table" class="table" style="margin-bottom: 5px;">
										<core:choose>
											<core:when test="${list.status!=4}">
												<tr>
													<td width="20%" style="border: 0;"><strong>可用项目</strong></td>
													<td width="25%" style="border: 0;"><strong>描述</strong></td>
													<td width="10%" style="border: 0;"><strong>已用次数</strong></td>
													<td width="10%" style="border: 0;"><strong>剩余次数</strong></td>
													<td style="border: 0;"></td>
					                    		</tr>
						                    	<core:forEach items="${list.memberPackageList}" var="detailList">
								                <tr>
													<td class="text-left success">${detailList[2]}</td>
													<td class="text-left success">${detailList[3]}</td>
													<td class="text-right success" style="padding-right: 45px;">${detailList[5]}</td>
													<td class="text-right success" style="padding-right: 45px;">${detailList[4]}</td>
													<td class="text-right success"></td>
								                </tr> 
					                      		</core:forEach>
											</core:when>
											</core:choose>
									</table>
								</div>
							</div>
							<core:choose>
		                    	<core:when test="${list.packageRedemList != null}">
		                    	<table class="table table-condensed"  style="margin-bottom: 0px;">
		                    		<tr class="tr_lign_m">
				                   	<th class="text-left" style="border: 0;">
				                   		<font style="font-family: Microsoft YaHei; color: green; font-weight: bolder;font-size: 16px;">
				                   			套餐使用明细
				                   		</font>
				                   	</th>
				                   	<th style="border: 0;"></th>
				                   	<th style="border: 0;"></th>
				                   	<th style="border: 0;"></th>
				                   	<th style="border: 0;"></th>
				                   	<th style="border: 0;"></th>
				                   	<th style="border: 0;"></th>
				                   </tr>
			                   		<tr>
				                   		<td colspan="7" style="border: 0;">
					                   		<table class="table" style="margin-bottom: 0px;">
					                   			<tr>
													<td class="align_m" width="10%"><strong>卡号</strong></td>
													<td class="align_m" width="15%"><strong>项目名称</strong></td>
						                       		<td class="align_m" width="10%"><strong>使用日期</strong></td>
							                        <td class="align_m"><strong>订单信息</strong></td>
							                        <td></td>
							                        <td></td>
							                        <td></td>
					                   			</tr>
				                   				<core:forEach items="${list.packageRedemList}" var="packageRedemList">
								                   <tr>
													<td class="align_w hasUsed" align="left">${packageRedemList[0]}</td>
													<td class="align_w hasUsed" align="left">${packageRedemList[1]}</td>
							                       <td class="align_w hasUsed" align="left">${packageRedemList[2]}</td>
							                       <core:if test="${packageRedemList[3] == null and packageRedemList[4] != null}">
							                       		<td class="align_w hasUsed" align="left">${packageRedemList[4]}</td>
							                       </core:if>
							                       <core:if test="${packageRedemList[4] == null and packageRedemList[3] != null}">
							                       		<td class="align_w hasUsed" align="left">${packageRedemList[3]}</td>
							                       </core:if>
							                       <core:if test="${packageRedemList[3] != null and packageRedemList[4] != null}">
							                       		<td class="align_w hasUsed" align="left">${packageRedemList[3]}/${packageRedemList[4]}</td>
							                       </core:if>
							                       <core:if test="${packageRedemList[3] == null and packageRedemList[4] == null}">
							                       		<td class="align_w hasUsed" align="left"></td>
							                       </core:if>
								                       <td class="align_w hasUsed" align="left"></td>
								                       <td class="align_w hasUsed" align="left"></td>
								                       <td class="align_w hasUsed" align="left"></td>
								                   </tr> 
						               			</core:forEach>
					                   		</table>
					                   	</td>
		                			</tr>
		                		</table>
		                    	</core:when>
           					</core:choose>  
							<core:if test="${list.benfit != null and list.benfit !='' and list.benfit != undefined and list.status != 4}">
								<div style="background-color: #F5F5F5;padding: 5px;20px;5px;20px;margin-bottom: 30px;">
	               					<p style="font-weight: bolder;font-size: 14px;">感谢您购买${list.name},
	               					作为驰加有道尊享会员，在套餐有效期间，您还可以享受以下多项会员福利：
	               						${list.benfit}
	               					</p>
								</div>
							</core:if>
                    	</td>
                    </tr> 
                    </core:forEach>
	                    	</core:otherwise>
	                    </core:choose>
                    </core:forEach>
					</table>
				</div>
				<div class="spliter h_5"></div> 
				<div class="spliter h_10"></div> 
				<div class="btn_div">
<!--                 	<button type="button" id="returnBtn" class="btn" value="打印" onclick="printPage()"><i class="glyphicon glyphicon-print" style="color:#FFFFFF"></i>&nbsp;打印</button> -->
            	</div>
				</core:forEach>
			</div>
		</div>
	</div>
  </body>
</html>